@import './transition/index.less';
@import './variables.less';
@import './common.less';


@layer components {
  .outline-box {
    position: relative;
    cursor: pointer;
    border-radius: 0.375rem;
    padding: 0.25rem;
    outline: #eeeeee solid 1px;
  }

  .outline-box::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 20;
    height: 0;
    width: 1px;
    border-radius: 0.375rem;
    opacity: 0;
    outline: #eeeeee solid 2px;
    transition: all 0.3s ease-in-out;
  }

  .outline-box.outline-box-active {
    //outline-color: #007BFF;
    outline-width: 2px;
  }

  .outline-box.outline-box-active::after {
    display: none;
  }

  .outline-box:not(.outline-box-active):hover::after {
    //outline-color: #007BFF;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 0.375rem;
    opacity: 1;
  }
}